<template>
<a-modal :label-col="{style: { width: '200px' }}"
         v-model:visible="visible"
         okText="提交"
         cancelText="取消"
         @ok="submit"
         @cancel="emit('close')"
         title="修改用户密码">
  <a-form>
    <a-form-item label="旧密码">
      <a-input-password v-model:value="form.oldPwd" />
    </a-form-item>
    <a-form-item label="新密码">
      <a-input-password v-model:value="form.newPwd" />
    </a-form-item>
    <a-form-item label="重复密码">
      <a-input-password v-model:value="form.repPwd" />
    </a-form-item>
  </a-form>
</a-modal>
</template>

<script setup>
import {ref} from "vue";
import {apiGet, apiPost, apiPut} from "../../../fentch";
import {message} from "ant-design-vue";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false
  },
  id: {
    type: Number,
    required: true,
    default: 0
  }
})

const form = ref({
  oldPwd: '',
  newPwd: '',
  repPwd: ''
})

const emit = defineEmits(['close'])

const submit = () => {
  if (form.value.newPwd !== form.value.repPwd) {
    message.error('确认密码不一致')
    return
  }
  apiPut(`/users/password/${props.id}`, {
    old_password: form.value.oldPwd,
    password: form.value.newPwd
  }).then(res => {
    if (res.data.code === 0) {
      message.success('操作成功')
      emit('close')
      return
    }
    message.error(res.data.message)
  })
}
</script>

<style scoped>

</style>